const echarts = require('echarts')

export function getPieOption(pieData, title) {
  const option = {
    title: {
      text: title
    },
    legend: { // 图例
      top: '12%',
      left: 'left',
      itemGap: 20,
      itemWidth: 10,
      itemHeight: 10
    },
    color: ['#006DCF', '#a0a0a0'],
    series: [{
      type: 'pie',
      top: 'middle',
      left: 'center',
      width: 350,
      height: 350,
      avoidLabelOverlap: false,
      label: {
        show: true,
        fontSize: 16,
        color: 'white',
        lineHeight: 18, // 行高
        formatter: '{d}%',
        fontWeight: 400,
        fontFamily: 'MicrosoftYaHei',
        position: 'inside'
      },
      emphasis: {
        label: {
          show: true,
          color: 'white',
          fontWeight: 'bold'
        }
      },
      data: pieData
    }]
  }
  return option
}

export function getBarOption(pieData, title) {
  const option = {
    title: {
      text: title
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      bottom: '3%',
      right: '28%',
      containLabel: true
    },
    xAxis: [{
      type: 'value',
      axisLabel: { // 刻度
        show: false
      },
      splitLine: { // 网格线
        show: false
      }
    }],
    yAxis: {
      type: 'category',
      inverse: false,
      data: pieData.yData,
      offset: 10,
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(0,0,0,0.15)'
        }
      },
      axisLabel: {
        textStyle: {
          color: 'rgba(0,0,0,0.87)',
          fontWeight: 400,
          fontSize: 14,
          fontFamily: 'MicrosoftYaHei'
        }
      }
    },
    series: [
      {
        // name: '2011',
        type: 'bar',
        data: pieData.data,
        barWidth: '24',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(0,0,0,0.15)'
        },
        label: {
          show: true,
          verticalAlign: 'middle',
          color: 'rgba(0,0,0,0.87)',
          fontWeight: 400,
          fontFamily: 'MicrosoftYaHei',
          fontSize: 14,
          lineHeight: 22
        },
        labelLayout: function () {
          return {
            x: 380,
            moveOverlap: 'shiftY',
            dy: 2
          }
        },
        itemStyle: {
          color: '#006DCF'
        }
      }
    ]
  }
  return option
}

export function setEchart(chartDom, chartOption) {
  if (chartDom) {
    const chart = echarts.init(chartDom)
    chart.setOption(chartOption)
    window.addEventListener('resize', () => {
      console.log(233)
      chart.resize()
    })
  }
}
